const TypographyTable = () => {
	return (
		<div class="my-6 w-full overflow-y-auto">
			<table class="w-full">
				<thead>
					<tr class="m-0 border-t p-0 even:bg-muted">
						<th class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
							King's Treasury
						</th>
						<th class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
							People's happiness
						</th>
					</tr>
				</thead>
				<tbody>
					<tr class="m-0 border-t p-0 even:bg-muted">
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Empty
						</td>
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Overflowing
						</td>
					</tr>
					<tr class="m-0 border-t p-0 even:bg-muted">
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Modest
						</td>
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Satisfied
						</td>
					</tr>
					<tr class="m-0 border-t p-0 even:bg-muted">
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Full
						</td>
						<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
							Ecstatic
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	)
}

export default TypographyTable
